<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%
	String path = request.getContextPath();
%>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 
<link
	href="<%=request.getContextPath()%>/lib/miniui/themes/default/miniui.css"
	rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath()%>/lib/miniui/miniui.js"
	type="text/javascript"></script>
<link
	href="<%=request.getContextPath()%>/lib/miniui/themes/bootstrap/skin.css"
	rel="stylesheet" type="text/css" />
-->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/index.css">
<link rel="icon"
	href="<%=request.getContextPath()%>/image/its_logo.jpg">
<title>ITS-登陆</title>
</head>
<body>
	<div class="login">
		<img src="<%=request.getContextPath()%>/image/timg.jpg" alt="ITS">
		<p>智能交通网络管理平台-ITS</p>
		<form method="post" id="form1">
			<div>
				<input type="text" id="username" name="userName" value=""
					placeholder="请输入用户名">
			</div>
			<div>
				<input type="password" id="password" name="password" value=""
					placeholder="请输入密码">
			</div>
			<div>
				<p class="error-message"></p>
				<input id="btnLogin" type="submit" value="登录">
			</div>
		</form>

	</div>
	<script src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script>
	<script src="<%=request.getContextPath()%>/js/layer.js"></script>
	<script src="<%=request.getContextPath()%>/js/layer-helper.js"></script>
	<script>
		// 网页加载时，直接将光标移到输入框中
		// 方法一：在<input autofocus >
		// 方法二：document.getElementById().focus();

		var btnLogin = document.getElementById('btnLogin');

		btnLogin.addEventListener('click', function(event) {
			// 登录按扭点击后会导致表单提交，而我们要阻止它提交
			// 通过事件对象的 preventDefault() 方法可以阻止表单提交或链接跳转
			event.preventDefault();

			var username = document.getElementById('username').value;
			var msg = document.getElementsByClassName('error-message')[0];

			if (username.trim().length < 1) {
				msg.innerText = "你还没有填写用户名！";
				// focus() 方法可以将光标移到输入框中
				document.getElementById('username').focus();
				return;
			}

			var password = document.getElementById('password').value;

			if (password.trim().length < 1) {
				msg.innerText = "你还没有填写密码！";
				document.getElementById('password').focus();
				return;
			}

			// 找到表单标签，调用它的 submit() 方法提交表单
			login();
		});

		function login() {
			$.ajax({
				//几个参数需要注意一下
				type : "POST",//方法类型
				dataType : "json",//预期服务器返回的数据类型
				url : "${pageContext.request.contextPath}/user/login",//url
				data : $('#form1').serialize(),
				success : function(result) {
					console.log(result);//打印服务端返回的数据(调试用)
					if (result.code == 200) {
						location.href='${pageContext.request.contextPath}/info/index';
					}else{
						layer.msg(result.message)
					}
					;
				},
				error : function() {
					alert("网页异常！");
				}
			});
		}
	</script>

</body>
</html>
